<template lang="pug">
  div
    template(v-if="$route.path === '/operative/crm/customer'")
      el-radio-group.clientTypes(v-model="curTabKey")
        el-radio-button(v-for="(tab, key) in clientTypes" :key="key" :label="key") {{tab.title}}
      .table
        s-table(
          ref="table"
          :reqUrl="curTab.reqUrl"
          :column="curTab.column"
          :queryPropsParams="{ ...curTab.queryPropsParams, areaId: curArea.areaId }"
          :initParameter="true"
          :filterProps="{ fields: curTab.searchItems, staffId: hasRole(['ROLE_GARDEN_LEADER', 'ROLE_EXECUTE_LEADER']) ? user.id : '' }"
          :callback="({parameter}) => tableCallback({ parameter: { ...parameter, curTab: 'Customer', curTabKey } })"
        )
          .table-operator(slot="table-operator")
            el-button.gradientVertical(size="large" round @click="() => modalHandle('add')") 新增
          template(slot="name" slot-scope="text, scope") {{text}}({{scope.relationship}})
          template(slot="birthday" slot-scope="text, scope")
            span {{text | dateFilter('YYYY/MM/DD')}}
          template(slot="month" slot-scope="text, scope")
            span {{scope.birthday | monthFilter}}
          template(slot="status" slot-scope="text, scope")
            el-tag(size="mini" :type="stautsFilter(text, scope, 'type')") {{stautsFilter(text, scope, 'name')}}
          template(slot="lastFollowRecord" slot-scope="text, scope")
            template(v-if="text")
              p {{text}}
              small.c_secondary 跟进时间:{{scope.lastFollowTime | dateFilter}}
            span(v-else) --
          template(slot="action" slot-scope="text, scope")
            el-link(@click="infoHandle(scope.id)" type="primary") 详情
    router-view(v-else)
    add-client(:visible.sync="modalObj.visible" @getInfo="refreshTable")
</template>
<script>
import { mapGetters } from 'vuex'
import { dictMixin, pagerMixin } from '@/mixins'
import { clientTypes } from './config'
import AddClient from '../../components/toClient'

export default {
  name: 'Customer',
  components: {
    addClient: AddClient
  },
  mixins: [dictMixin, pagerMixin],
  data () {
    return {
      curTabKey: 'all',
      clientTypes,
      modalObj: {
        id: '',
        visible: false,
        component: ''
      }
    }
  },
  computed: {
    ...mapGetters(['curArea', 'dict', 'user']),
    curTab () {
      const { curTabKey } = this
      return clientTypes[curTabKey]
    }
  },
  watch: {
    curTabKey (val) {
      this.tableCallback({ ...this.pageParameter, curTabKey: val })
      this.$nextTick(function () {
        this.refreshTable(true)
      })
    }
  },
  created () {
    this.curTabKey = this.pageParameter.curTabKey || 'all'
  },
  methods: {
    // 刷新列表
    refreshTable (flag = false) {
      this.$refs.table.refresh(flag)
    },
    modalHandle (component) {
      this.modalObj = {
        visible: true,
        component
      }
    },
    stautsFilter (val, scope, key) {
      if (scope.signStatus === 1) {
        return key === 'name' ? '已成交' : 'success'
      }
      const statusList = this.dict?.clientStatus || []
      if (!val) {
        return key === 'name' ? '其他' : 'info'
      }
      const status = statusList.find(x => x.id === val?.toString()) || {}
      return status[key] || ''
    },
    // 跳转详情
    infoHandle (id) {
      this.$router.push({
        path: '/operative/crm/customer/info',
        query: { id }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.clientTypes{
  ::v-deep{
    .el-radio-button__inner{

      &:hover, &:focus{
        box-shadow: none;
        color: #fff;
        background: linear-gradient(0deg, $--app-linear-gradient-stop1 0%, $--app-linear-gradient-stop2 100%);
      }
    }

    .el-radio-button{
      &.is-active{
        box-shadow: none;
      }
    }
    .el-radio-button__orig-radio:checked + .el-radio-button__inner{
      background: linear-gradient(0deg, $--app-linear-gradient-stop1 0%, $--app-linear-gradient-stop2 100%);
      border-image: linear-gradient(0deg, rgba(245, 172, 60, 0.7), rgba(170, 205, 34, 0.7)) 1 1;
      box-shadow: none;
    }
  }
}

.table{
  margin-top: 20px;
}
</style>
